<!doctype html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.83.1">
  <title>新建项目</title>


  <!-- Bootstrap core CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    .container {
      max-width: 960px;
    }


    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>
  <link href="/css/dashboard.css" rel="stylesheet">

  <!-- Custom styles for this template -->

</head>

<body class="bg-light">
  <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">新建项目</a>
  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
          aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!--    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">-->
  <ul class="navbar-nav px-3">
    <li class="nav-item text-nowrap">
      <a class="nav-link" href="/logout">注销</a>
    </li>
  </ul>
</header>

  <div class="container-fluid">
    <div class="row">
      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="position-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link " aria-current="page" href="/main">
                <span data-feather="home"></span>
                项目总览
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/search.html">
                <span data-feather="search"></span>
                项目搜索
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/user">
                <span data-feather="users"></span>
                用户管理
              </a>
            </li>
          </ul>

          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>项目调整</span>
          </h6>
          <ul class="nav flex-column mb-2">
            <li class="nav-item">
              <a class="nav-link active" href="/add">
                <span data-feather="file-plus"></span>
                增加项目
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/edit">
                <span data-feather="edit"></span>
                修改项目
              </a>
            </li>
<!--            <li class="nav-item">-->
<!--              <a class="nav-link" href="/delete.html">-->
<!--                <span data-feather="trash-2"></span>-->
<!--                删除项目-->
<!--              </a>-->
<!--            </li>-->
          </ul>
        </div>
      </nav>

      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 ">
        <div class="py-5 text-center">
          <img class="d-block mx-auto mb-4" src="/images/add.svg" alt="" width="72" height="57">
          <h2>创建项目</h2>
<!--          <p class="lead">填写以下内容来创建您的项目</p>-->

<!--          <div th:if="${status} eq 'success'">-->
<!--            <h4 id="succ" th:text="${status}"></h4>-->
<!--            <p>新建项目成功</p>-->
<!--            <a href="/main" class="btn  btn-outline-info" >点击跳转详细信息</a>-->
<!--          </div>-->
          <h4 id="succ" th:text="${status}"></h4>
        </div>

        <div class="row g-5 col-md-8 m-auto" >
          <div class="col-md-5 col-lg-4 order-md-last" style="margin-top: 0"  >
            <h4 class="d-flex justify-content-between align-items-center mb-3">
              <span class="text-primary">项目样例</span>
              <span class="badge bg-primary rounded-pill">0</span>
            </h4>
            <ul class="list-group mb-3">
              <li class="list-group-item d-flex justify-content-between lh-sm">
                <div>
                  <h6 class="my-0">项目编号</h6>
                  <small class="text-muted">简单数字</small>
                </div>
                <span class="text-muted">01</span>
              </li>
              <li class="list-group-item d-flex justify-content-between lh-sm">
                <div>
                  <h6 class="my-0">项目负责人</h6>
                  <small class="text-muted">填写负责人名字</small>
                </div>
                <span class="text-muted">张三</span>
              </li>
              <li class="list-group-item d-flex justify-content-between lh-sm">
                <div>
                  <h6 class="my-0">项目名称</h6>
                  <small class="text-muted">简要名称</small>
                </div>
                <span class="text-muted">大数据处理</span>
              </li>
              <li class="list-group-item d-flex justify-content-between bg-light">
                <div >
                  <h6 class="my-0">项目等级</h6>
                  <small class="text-muted">等级选择</small>
                </div>
                <span >国家级</span>
              </li>
              <li class="list-group-item d-flex justify-content-between">
                <span>项目金额</span>
                <small class="text-muted">20(万)</small>
              </li>
            </ul>

            <!--          <form class="card p-2">-->
            <!--            <div class="input-group">-->
            <!--              <input type="text" class="form-control" placeholder="Promo code">-->
            <!--              <button type="submit" class="btn btn-secondary">Redeem</button>-->
            <!--            </div>-->
            <!--          </form>-->
          </div>

          <div  class="col-md-7 col-lg-8" style="margin-top: 0">
            <h4 class="mb-3">项目详细信息</h4>
            <form class="needs-validation" novalidate action="/addproject" method="post">
              <div class="row g-3">
                <div class="col-sm-12 ">
                  <label for="firstName" class="form-label">项目编号</label>
                  <input type="text" name="proid" class="form-control" id="firstName" placeholder="项目编号建议使用数字" value="" required>
                  <div class="invalid-feedback">
                    请填写项目编号
                  </div>
                </div>

                <!--              <div class="col-sm-6">-->
                <!--                <label for="lastName" class="form-label">Last name</label>-->
                <!--                <input type="text" class="form-control" id="lastName" placeholder="" value="" required>-->
                <!--                <div class="invalid-feedback">-->
                <!--                  Valid last name is required.-->
                <!--                </div>-->
                <!--              </div>-->

                <div class="col-12">
                  <label for="username" class="form-label">项目负责人</label>
                  <div class="input-group has-validation">
                    <!--                  <span class="input-group-text">@</span>-->
                    <input type="text" name="prouser" class="form-control" id="username" placeholder="用户名建议为姓名" required>
                    <div class="invalid-feedback">
                      请填写项目负责人
                    </div>
                  </div>
                </div>

                <!--              <div class="col-12">-->
                <!--                <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>-->
                <!--                <input type="email" class="form-control" id="email" placeholder="you@example.com">-->
                <!--                <div class="invalid-feedback">-->
                <!--                  Please enter a valid email address for shipping updates.-->
                <!--                </div>-->
                <!--              </div>-->

                <div class="col-12">
                  <label for="address" class="form-label">项目名称</label>
                  <input type="text" name = "proname" class="form-control" id="address" placeholder="项目名称建议简明扼要" required>
                  <div class="invalid-feedback">
                    请填写项目名称
                  </div>
                </div>

                <div class="col-12">
                  <label for="address2" class="form-label">项目详细信息</label>
                  <input type="text" name="prodetail" class="form-control" id="address2" placeholder="简要介绍项目的特点以及应用领域" required>
                  <div class="invalid-feedback">
                    请填写项目详细信息
                  </div>
                </div>

                <div class="col-md-5">
                  <label for="country" class="form-label">项目等级</label>
                  <select name="prograde" class="form-select" id="country" required>
                    <option value="">请选择</option>
                    <option>国家级</option>
                    <option>省级</option>
                    <option>市级</option>
                  </select>
                  <div class="invalid-feedback">
                    请选择项目等级
                  </div>
                </div>

                <!--              <div class="col-md-4" >-->
                <!--                <label for="state" class="form-label">State</label>-->
                <!--                <select class="form-select" id="state" required>-->
                <!--                  <option value="">Choose...</option>-->
                <!--                  <option>California</option>-->
                <!--                </select>-->
                <!--                <div class="invalid-feedback">-->
                <!--                  Please provide a valid state.-->
                <!--                </div>-->
                <!--              </div>-->

                <div class="col-md-3">
                  <label for="zip" class="form-label">经费金额</label>
                  <input type="text" name="profee" class="form-control" id="zip" placeholder="" onkeyup="this.value=this.value.replace(/\D/g,'')" required>
                  <div class="invalid-feedback">
                    请填写经费金额
                  </div>
                </div>
              </div>

              <hr class="my-4">

              <!--            <div class="form-check">-->
              <!--              <input type="checkbox" class="form-check-input" id="same-address">-->
              <!--              <label class="form-check-label" for="same-address">Shipping address is the same as my billing-->
              <!--                address</label>-->
              <!--            </div>-->

              <!--            <div class="form-check">-->
              <!--              <input type="checkbox" class="form-check-input" id="save-info">-->
              <!--              <label class="form-check-label" for="save-info">Save this information for next time</label>-->
              <!--            </div>-->

              <!--            <hr class="my-4">-->

              <!--            <h4 class="mb-3">Payment</h4>-->

              <!--            <div class="my-3">-->
              <!--              <div class="form-check">-->
              <!--                <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>-->
              <!--                <label class="form-check-label" for="credit">Credit card</label>-->
              <!--              </div>-->
              <!--              <div class="form-check">-->
              <!--                <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>-->
              <!--                <label class="form-check-label" for="debit">Debit card</label>-->
              <!--              </div>-->
              <!--              <div class="form-check">-->
              <!--                <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>-->
              <!--                <label class="form-check-label" for="paypal">PayPal</label>-->
              <!--              </div>-->
              <!--            </div>-->

              <!--            <div class="row gy-3">-->
              <!--              <div class="col-md-6">-->
              <!--                <label for="cc-name" class="form-label">Name on card</label>-->
              <!--                <input type="text" class="form-control" id="cc-name" placeholder="" required>-->
              <!--                <small class="text-muted">Full name as displayed on card</small>-->
              <!--                <div class="invalid-feedback">-->
              <!--                  Name on card is required-->
              <!--                </div>-->
              <!--              </div>-->

              <!--              <div class="col-md-6">-->
              <!--                <label for="cc-number" class="form-label">Credit card number</label>-->
              <!--                <input type="text" class="form-control" id="cc-number" placeholder="" required>-->
              <!--                <div class="invalid-feedback">-->
              <!--                  Credit card number is required-->
              <!--                </div>-->
              <!--              </div>-->

              <!--              <div class="col-md-3">-->
              <!--                <label for="cc-expiration" class="form-label">Expiration</label>-->
              <!--                <input type="text" class="form-control" id="cc-expiration" placeholder="" required>-->
              <!--                <div class="invalid-feedback">-->
              <!--                  Expiration date required-->
              <!--                </div>-->
              <!--              </div>-->

              <!--              <div class="col-md-3">-->
              <!--                <label for="cc-cvv" class="form-label">CVV</label>-->
              <!--                <input type="text" class="form-control" id="cc-cvv" placeholder="" required>-->
              <!--                <div class="invalid-feedback">-->
              <!--                  Security code required-->
              <!--                </div>-->
              <!--              </div>-->
              <!--            </div>-->

              <!--            <hr class="my-4">-->

              <button class="w-100 btn btn-primary btn-lg" type="submit">提交信息</button>
            </form>
          </div>
        </div>
      </main>
    </div>



<!--    <footer class="my-5 pt-5 text-muted text-center text-small">-->
<!--      <p class="mb-1">&copy; 2020–2021 诗和远方</p>-->
<!--&lt;!&ndash;      <ul class="list-inline">&ndash;&gt;-->
<!--&lt;!&ndash;        <li class="list-inline-item"><a href="#">Privacy</a></li>&ndash;&gt;-->
<!--&lt;!&ndash;        <li class="list-inline-item"><a href="#">Terms</a></li>&ndash;&gt;-->
<!--&lt;!&ndash;        <li class="list-inline-item"><a href="#">Support</a></li>&ndash;&gt;-->
<!--&lt;!&ndash;      </ul>&ndash;&gt;-->
<!--    </footer>-->
  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>


  <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
          integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
          crossorigin="anonymous"></script>
  <script>
    /* globals Chart:false, feather:false */
    (function (){
      feather.replace()
    })()
  </script>
  <script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function () {
      'use strict'

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.querySelectorAll('.needs-validation')

      // Loop over them and prevent submission
      Array.prototype.slice.call(forms)
        .forEach(function (form) {
          form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
              event.preventDefault()
              event.stopPropagation()
            }

            form.classList.add('was-validated')
          }, false)
        })
    })()

  </script>
<script>

</script>
</body>

</html>